import { useState } from "react";
import { Spin } from "antd";
import { Image } from "antd";

const ImgLoading = ({ src }: { src: string }) => {
  const [loading, setLoading] = useState(true);
  return (
    <div style={{ position: "relative", width: "100%", height: "100%" }}>
      {loading && (
        <div
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            backgroundColor: "#f0f0f0", // 可选：设置背景
          }}
        >
          <Spin size="small" />
        </div>
      )}
      <Image
        src={src}
        width={60}
        height={38}
        style={{ verticalAlign: "middle" }}
        loading="lazy"
        onLoad={() => setLoading(false)} // 图片加载完成时
        onError={() => setLoading(false)} // 图片加载失败时
      />
    </div>
  );
};

export default ImgLoading;
